<template>
	<view class="content">
		<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers" @callouttap="jumpToDetail" @regionchange="regionChange">
			<cover-view slot="callout">
				<block v-for="(item,index) in callouts" :key="index">
					<cover-view class="customCallout" :marker-id="item.id">
						<cover-view style="width: 120rpx;" class="left-border">
							<cover-image :src="item.avater" mode="" class="border-top-left image"></cover-image>

						</cover-view>
						<cover-view class="callout-content call-out-first" style="width: 230rpx;">
							<cover-view class="callout-content call-out-first">
								{{item.inviTitle||'新发言'}}
							</cover-view>
							<cover-view class="callout-content call-out-second">
								{{item.inviContent}}
							</cover-view>
							<cover-view style="display: flex;">
								<cover-view class="border-top-left icon-box callout-content call-out-second">
									<cover-view class="icon-text">{{item.agree}}</cover-view>
									<cover-image src="../../static/unicon/Check.png" class="icon"></cover-image>
								</cover-view>
								<cover-view class="border-top-left icon-box callout-content call-out-second">
									<cover-view class="icon-text">{{item.comment}}</cover-view>
									<cover-image src="../../static/unicon/Chat.png" class="icon"></cover-image>
								</cover-view>
							</cover-view>

						</cover-view>
					</cover-view>

				</block>

			</cover-view>
		</map>

	</view>
</template>

<script>
	export default {
		name: 'Map',
		props: {
			location: {
				type: Array,
				default () {
					return []
				}
			},
			latitude: {
				default () {
					return 0
				}
			},
			longitude: {
				default () {
					return 0
				}
			},
			maxShow :{
				default() {
					return 20
				}
			}
		},
		data() {
			return {
				id: 0,
				title: 'map',
				locations: [],
				covers: [],
				/**
				 * 气泡数组
				 * @date 2022-06-21
				 * @author 乐嘉伟 
				 */
				callouts: [],
				/**
				 * 相同经纬度的个数，以实现消息图案堆叠
				 * @date 2022-06-21
				 * @param {Object}
				 * @author 乐嘉伟 
				 */
				offset: {},
				/**
				 * 偏移量
				 * 相同经纬度图案的偏移量
				 * @date 2022-06-21
				 * @param {number} 经纬度的偏移值
				 * @author 乐嘉伟 
				 */
				walk: 0.000006
			}
		},
		mounted() {
			let resp = setInterval(() => {
				if (this.location.length != 0) {
					clearInterval(resp);
					this.loadCovers()
				}
			}, 500)
		},
		methods: {
			/**
			 * 跳转到消息详情页
			 * 并向父组件发送广播
			 * @date 2022-06-21
			 * @param {object} 包含markderid的对象
			 * @author 乐嘉伟 
			 */
			jumpToDetail(e) {
				this.$emit("ChildClick", e.detail.markerId)
				uni.navigateTo({
					url: "../../pages/home/HomeItem/Detail?inviId=" + e.detail.markerId
				})
			},
			/**
			 * 加载Covers
			 * 没有标题的消息会覆盖为: 新消息
			 * 没有头像的用户会覆盖为： https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png
			 * @date 2022-06-21
			 * @param {Array} location
			 * @return {Array} covers,callouts
			 * @author 乐嘉伟 
			 */
			loadCovers() {
				this.locations=this.location.reverse();
				let tot=0;
				for (let i = 0; i < this.location.length; i++) {
					if(tot==this.maxShow) break;//限制地图中最多显示maxShow个
					tot++;
					var one = this.locations[i]
					if (one.inviTitle.length > 5) {
						one.inviTitle = one.inviTitle.substr(0, 5) + '..'
					}

					if (one.inviContent.length > 10) {
						one.inviContent = one.inviContent.substr(0, 10) + '..'
					}
					if (this.offset[one.build.yposition + '-' + one.build.xposition] == null) {
						this.offset[one.build.yposition + '-' + one.build.xposition] = 0
					} else {
						this.offset[one.build.yposition + '-' + one.build.xposition]++
					}
					var latitude = one.build.yposition - this.offset[one.build.yposition + '-' + one.build.xposition] *
						this.walk
					var longitude = one.build.xposition + this.offset[one.build.yposition + '-' + one.build.xposition] *
						this.walk
					this.covers.push({
						id: one.inviId,
						latitude: latitude,
						longitude: longitude,
						iconPath: '../../static/search/icon.png',
						width: '30px',
						height: '30px',
						customCallout: {
							display: 'ALWAYS'
						},
					})
					var head = one.schoolUser.headPortrait
					if (head == null || head == '') head =
						'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
					if (one.agreeNum > 99) one.agreeNum = '99+'
					this.callouts.push({
						id: one.inviId,
						avater: head,
						inviTitle: one.inviTitle,
						inviContent: one.inviContent,
						agree: one.agreeNum,
						comment:one.commentNum
					})
				}
			},
			/**
			 * 位置改变时向父组件发送广播
			 * 以保证重回地图时在相同位置
			 * @date 2022-06-21
			 * @param {object} 包含位置的对象
			 * @author 乐嘉伟 
			 */
			regionChange(e) {
				if(e.type=='end')
					this.$emit('ReportLocation',e.detail.centerLocation)
			},
			getMarkers() {
				console.log(this.markers)
			},

			// async getTieData(type) {
			// 	const page = 1
			// 	const res = await this.$myRequest({
			// 		url: '/invitation/selectInviteAll',
			// 		data: {
			// 			num: 1,
			// 			page: page,
			// 			pageSize: 5
			// 		}
			// 	})
			// 	console.log(res);
			// 	return res.data.data;
			// },
			// async getHottestInvitation() {
			// 	const res = await this.$myRequest({
			// 		url:'/invitation/selectInviteAll?num=2&page=1&pageSize=10'
			// 	})
			// 	console.log(res)
			// 	// if(res.data.data.list.length != 0) {
			// 	// 	this.topicArr[type].list = res.data.data.list
			// 	// }
			// }
		}
	}
</script>

<style scoped>
	.icon {
		align-items: center;
		width: 36rpx;
		background-color: rgba(0, 0, 0, 0);
		margin-top: 3rpx;
	}

	.icon-text {
		align-items: center;
		color:rgb(10, 10, 10);
		font-size: 14px;
		font-weight: 500;
		margin-top: 4rpx;
		margin-right:2rpx;
		margin-left:2rpx
	}

	.icon-box {
		display: flex;
		justify-content: center;
		background-color: white;
		border-radius: 5px;
		color: rgb(10, 10, 10);
		margin: 5rpx;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.image {
		width: 108rpx;
		height: 108rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		
		border-radius: 100000rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.content {
		width: 700rpx;
		height: calc(100vh - 385rpx);
		/* height: calc(100%-200rpx); */
		margin: 0 25.45rpx;
		border-radius: 18.18rpx;
		overflow: hidden;
	}

	.map {
		width: 700rpx;
		height: 100%;
	}

	.customCallout {
		box-sizing: border-box;
		background-color: rgba(98, 167, 255, 1);
		border: 2px solid rgba(0, 0, 0, 0.1);
		border-bottom: 0px;
		border-right: 0px;
		color: white;
		border-radius: 30rpx;
		width: 360rpx;
		height: 190rpx;
		display: inline-flex;
		padding: 5rpx 10rpx;
		justify-content: center;
		align-items: center;
	}
	.border-top-left {
		border: 1px solrid rgba(0, 0, 0, 0.1);
		border-bottom: 0px;
		border-right: 0px;
	}
	.last-callout {
		background-color: rgba(98, 167, 255, 1);
		/* background-color: white; */
	}
	.left-border {
		border-top: 0rpx;
		border-left: 0rpx;
		border-bottom: 0rpx;
		border-right: 4px;
		border-style: solid;
		border-color: white;
		padding-right: 5rpx;
	}
	.callout-content {
		color: white;
		padding: 4rpx;
		padding-top: 0px;
		font-size: 14px;
		white-space: pre-wrap;
		
	}

	.call-out-first {
		font-size: 15px;
		font-weight: 700;
	}

	.call-out-second {
		color: white;
		font-weight: 400;
	}
</style>
